<template>
  <div>
    <div class="main-box main-boxa">
      <HeaderTitle :title="title">
        <li class="tabs-title small-9 text-right" slot="right">
          <select class="select-sch" @change="getSchoolInfo(schoolId)" v-model="schoolId">
            <option v-for="(school, index) in schoolList" :key="index" :value="school.id">
              {{school.name}}
            </option>
          </select>
          <span class="select-icon"></span>
        </li>
      </HeaderTitle>
      <div class="tabs-content tabs-a-con" data-tabs-content='tabs1'>
        <div class="tabs-panel is-active" id="par1">
          <div class="tabs-b-box">
            <div class="tabs-b-con pB40">
              <h1 class="art-tit">{{school.name}}介绍</h1>
              <div class="art-main">
                <hr class="hr-a"/>
                <p>{{school.content}}</p>
                <h2 class="art-sub-tit">联系方式</h2>
                <div class="mess-box">
                  <p class="grid-x">
                    <span class="small-4"><img :src="images[0]"/>联系电话:</span>
                    <span class="small-8">{{school.phone}}</span>
                  </p>
                  <p class="grid-x">
                    <span class="small-4"><img :src="images[1]"/>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</span>
                    <span class="small-8">{{school.email}}</span></p>
                  <p class="grid-x">
                    <span class="small-4"><img :src="images[2]"/>详细地址:</span>
                    <span class="small-8">{{school.address}}</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import HeaderTitle from '../../components/HeadTitle/HeadTitle'
  import {reqSchools, reqSchoolsInfo} from '../../api/index'
  import commonJs from '../../assets/js/commonJs'

  export default {
    name: "Campus",
    components: {
      HeaderTitle
    },
    data() {
      return {
        title: '分校简介',
        schoolId: '',
        school: {},
        schoolList: []
      }
    },
    async mounted() {
      let result = await commonJs.openAjax(reqSchools(), true, true);
      if (result.code == 0) {
        this.schoolList = result.data;
        this.schoolId = this.schoolList[0].id;
        let info = await reqSchoolsInfo(this.schoolId);
        if (info.code == 0) {
          this.school = info.data;
        }
      }
    },
    methods: {
      async getSchoolInfo(id) {
        let result = await commonJs.openAjax(reqSchoolsInfo(id), true, true);
        if (result.code == 0) {
          this.school = result.data;
        } else {
          this.school = {};
        }
      }
    },
    computed: {
      ...mapState(['images']),
    }
  }
</script>

<style scoped>
  .select-icon {
    right: 24px;
  }
</style>
